<template>
<div class='rcb-bottom' ref="rcbBottom">
	<subTitle :title="title" ref="subTitle"></subTitle>
	<div class="chart-container" ref="chartContainer">
		<nestPieChart ref="pieChart" :data="dataSet.rightCenterBottom ? dataSet.rightCenterBottom.rcbBottom.outerData : []" :colors="outerColors" class="lc-pie-chart"></nestPieChart>
	</div>
	<img src="../../../../assets/imgs/left/bottomBg.png" class="bt-bg" ref="btBg">
</div>
</template>

<script>
import { mapState } from 'vuex'
import subTitle from '../../../../components/common/subTitle'
import nestPieChart from '@/components/common/nestPieChart'
export default {
components: {
	subTitle,nestPieChart
},
data() {
return {
	title: "问题责任方分布"
};
},
created() {},
mounted() {},
computed: {
  ...mapState(['dataSet']),
  outerColors() {
    if(this.dataSet.rightCenterBottom){
      return this.dataSet.rightCenterBottom.rcbBottom.outerColors
    } else {
      return []
    }
  }
},
watch: {},
methods: {
	init() {
		let tl = new TimelineMax({})
		let tw0 = TweenMax.from(this.$refs.rcbBottom, .3, {opacity: 0,scaleY:0})
		let tw1 = TweenMax.from(this.$refs.chartContainer, 0.3, {opacity: 0})
		let tw3 = TweenMax.from(this.$refs.btBg, .3, {opacity: 0})
		tl.addLabel('start')
			.add(tw0,'start')
			.add(this.$refs.subTitle.init(),'start+=0.2')
			.add(tw1,'start+=0.8')
			.add(this.$refs.pieChart.init, 'start+=1') 
			.add(tw3,'start+=1.5')
		return tl
	}
},
}
</script>
<style lang='scss' scoped>
  .rcb-bottom {
    width: 100%;
		height: 267px;
		background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(3,94,240,0.1) 100%);
		.chart-container {
			width: 95%;
			height: 237px;
			margin: 0 auto;
		}
		.bt-bg {
			margin-top: -30px;
		}
  }
</style>